import React, {useMemo} from "react";
import {withTranslation} from "react-i18next";
import {Provider} from "react-redux";
import {coreConnect, store} from "./utils/StoreUtil.tsx";
import {configChange, setConfig} from "./Config.tsx";
import {ConfigProvider} from "antd";
import {getLanguage} from "../i18n/i18n.tsx";
import AppRouter from "./router/AppRouter.tsx";
import GlobalDrawer from "./global/GlobalDrawer.tsx";
import GlobalModal from "./global/GlobalModal.tsx";
import GlobalMsg from "./global/GlobalMsg.tsx";
import { createSuffixMap } from "./services/PreviewService.tsx";

let TopRouter: any;

setConfig({
    routerComponent: AppRouter
});
createSuffixMap();

configChange((curConfig: any) => {
    TopRouter = curConfig.routerComponent;
});

interface AppProps {
    themeToken: any
}

const App: FC<AppProps> = function (props) {
    const {themeToken} = props;

    const renderApp = useMemo(() => {
        if (!themeToken) {
            return null;
        }
        return (
            <ConfigProvider
                locale={getLanguage()}
                theme={{
                    token: {
                        "colorPrimary": themeToken.themeColor,
                        "fontSize": themeToken.fontSize,
                        "colorTextBase": themeToken.fontColor,
                        "borderRadius": themeToken.borderRadius,
                    }
                }}
            >
                <GlobalMsg/>
                <GlobalModal/>
                <GlobalDrawer/>
                <TopRouter/>
            </ConfigProvider>
        )
    }, [themeToken]);

    return (renderApp);
};

let CApp = withTranslation()(coreConnect("themeReducer")(React.memo(App)));

export default React.memo(function StoreRoot() {
    return (
        <Provider store={store}>
            <CApp/>
        </Provider>
    )
});